<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
        *{
            padding: 0;
            margin: 0;
        }
        /* 网页顶部 */
        .title{
            width: 100%;
            background: skyblue;
            line-height: 44px;
            text-align: center;
            font-size: 26px;
            color: #fff;
        }
        /* 导航 */
        .banner{
            line-height: 50px;
            width: 100%;
            background: cornflowerblue;
            text-align: center;
        }
        .banner button{
            height: 30px;
            width: 100px;
            border: 0;
            border-radius: 15px;
            margin: 0 10px;
        }
        .banner .on{
            color: crimson;
        }
        /* 任务清单 */
        .inventory{
            display: none;
        }
        .list{
            width: 90%;
            margin: 20px auto;
            border: 1px solid #aaa;
            border-collapse: collapse;
        }
        .list th,td{
            border: 1px solid #aaa;
            text-align: center;
        }
        .list button{
            width: 60px;
            border: 0;
            background: cornflowerblue;
            color: #fff;
            border-radius: 10px;
        }
        .main .active{
            display: block;
        }
        /* 添加任务 */
        .addTask{
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            display: none;
        }
        input{
            height: 30px;
            width: 200px;
            outline: none;
            border: 1px solid #aaa;
            margin: 20px 10px;
        }
        .addTask button{
            height: 30px;
            width: 100px;
            background: rgb(106, 218, 106);
            border:0;
            border-radius: 15px;
            color: #fff;
        }
    </style>
</head>
<body>
    <header class="title">希望清单</header>
    <nav class="banner">
        <button class="banner-list on">任务列表</button>
        <button class="banner-add">添加任务</button>
    </nav>
    <main class="main">
        <div class="inventory active">
            <table class="list">
                <tr>
                    <th>日期</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>
        <div class="addTask">
            <p>日期:<input type="date"></p>
            <p>内容:<input type="text" maxlength="10"></p>
            <button>提交</button>
        </div>
    </main>
    <script>
        // 点击任务列表切换列表界面，点击添加任务切换添加界面
        let btn=document.querySelectorAll(".banner button");
        let div=document.querySelectorAll(".main div");
        let index=0;
        btn.forEach(function(v,i){
            v.addEventListener("click",function(){
                div[index].classList.remove("active");
                btn[index].classList.remove("on");
                v.classList.add("on");
                div[i].classList.add("active");
                index=i;
            })
        })
        // 点击添加任务中的提交按钮提交数据给任务列表
        let addbtn=document.querySelector(".addTask button");
        let list=document.querySelector(".list");
        let date=document.querySelector("input[type='date']");
        let text=document.querySelector("input[type='text']");
        let tr,arr1=[],arr2=[];
        addbtn.addEventListener("click",function(){
            if(date.value!=="" && /^[\S]{1,10}$/.test(text.value)){
                tr=`<tr>
                    <td>${date.value}</td>  
                    <td>${text.value}</td>
                    <td><button class="del">删除</button></td>
                </tr>`
                list.innerHTML+=tr;
                // 判断本地存储里面是否有内容，如果有就往后面追加数据，如果没有就往新数组里面添加数据
                if (localStorage.getItem("date")) {
                    let a=JSON.parse(localStorage.getItem("date"));
                    a.push(date.value);
                    localStorage.setItem("date",JSON.stringify(a));
                    let b=JSON.parse(localStorage.getItem("content"));
                    b.push(text.value);
                    localStorage.setItem("content",JSON.stringify(b));
                }else{
                    arr1.push(date.value);
                    arr2.push(text.value);
                    localStorage.setItem("date",JSON.stringify(arr1));
                    localStorage.setItem("content",JSON.stringify(arr2));
                }
                // 清空输入框的值
                date.value=text.value="";
                div[1].classList.remove("active");
                btn[1].classList.remove("on");
                btn[0].classList.add("on");
                div[0].classList.add("active");
                index=0;
            }else{
                alert("请输入正确信息");
            }
        })
        // 点击删除时删除本行的数据
        let del=document.querySelector(".list");
        del.addEventListener("click",function(e){
            if(e.target.className==="del"){
                let tes=list.children;
                // 点击删除时拿到本地存储的数据，找到点击时对应的数据，删除本地存储的数据
                let datearr=JSON.parse(localStorage.getItem("date"));
                datearr.splice([].indexOf.call(tes,e.target.parentNode.parentNode.parentNode)-1,1);
                localStorage.setItem("date",JSON.stringify(datearr));

                let contentarr=JSON.parse(localStorage.getItem("content"));
                contentarr.splice([].indexOf.call(tes,e.target.parentNode.parentNode.parentNode)-1,1);
                localStorage.setItem("content",JSON.stringify(contentarr));

                location.reload();
                // if (JSON.parse(localStorage.getItem("date")).length===0) {
                //     localStorage.removeItem("date");
                //     localStorage.removeItem("content");
                // }
            }
        });
        // 页面加载完成后列表中显示本地存储的内容
        window.onload=function(){
            let a=JSON.parse(localStorage.getItem("date"));
            let b=JSON.parse(localStorage.getItem("content"));
            a.forEach(function(v,i){
                let li=`
                    <tr>
                        <td>${v}</td>
                        <td>${b[i]}</td>
                        <td><button class="del">删除</button></td>
                    </tr>`;
                list.innerHTML+=li;
            })
        }
    </script>
</body>
</html>